<template>
    <div class="wrap">
        <!-- 头部组件 -->
          <Header :title="'记录'"/>
        <div class="antenatal">
            <div class="antenatal-item">
                <router-link to="/record/weight">
                     <img src="../../images/icon_05.png" alt="">
                     <p>体重腹围</p>
                </router-link>
               
            </div>
            <div class="antenatal-item">
                <router-link to="/record/shopinfo">
                    <img src="../../images/icon_04.png" alt="">
                <p>胎动计数</p>
                </router-link>
                
            </div>
            <div class="antenatal-item">
                <router-link to="">
                     <img src="../../images/icon_03.png" alt="">
                <p>药品营养剂</p>
                </router-link>
               
            </div>
            <div class="antenatal-item">
                <router-link to="">
                     <img src="../../images/icon_02.png" alt="">
                <p>产检档案</p>
                </router-link>
               
            </div>
        </div>
        <Tabbar />
    </div>
</template>
<script>
//导入公共组件 tabbar.vue
import Tabbar from '../comments/tabbar.vue'
import Header from '../comments/header.vue'
export default {
  data() {
    return {};
  },
  components:{
      "Tabbar":Tabbar,
      "Header":Header
  }
};
</script>
<style scoped>
.mint-header {
  background: #00bcd461;
  font-size: 20px;
  height: 50px;
  border-bottom: 1px solid #fff;
}
.wrap {
  background-color: #fff;
  width: 100%;
  height: 100%;
  background: url(http://img95.699pic.com/photo/40005/1604.jpg_wh300.jpg) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}
.antenatal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 100px;
}
.antenatal-item {
  width: 46%;
  text-align: center;
  background-color: #ffc0cb6e;
  margin: 5px;
  padding: 10px;
  border-radius: 10px;
}
.antenatal-item img {
  width: 40px;
  height: 40px;
}
</style>